<template>
	<view class="goods_list">
		<!-- //goods 是封装时定义的属性 -->
		<goods-list :goods="goods" @goodsItemClick="goGoodsList"></goods-list> 
		<view class="isOver" v-if="flag">
			-----已经到底啦-----
		</view>
	</view>
</template>

<script>
	import goodLists from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				pageindex:1 ,
				goods:[],
				flag:false
			}
		},
		components:{"goods-list":goodLists},// goods-list 是组件的名字  goodLists是导进来的名字
		methods: {
			//获取商品列表的数据 
			async getGoodsList (callBack) {
			const res=await	this.$myRequest({
					url:'/api/getgoods?pageindex='+this.pageindex,//自己封装的myRequest要用对象
				})
				 this.goods=[...this.goods,...res.data.message];//保留之前页面的数据
				 callBack&&callBack();//有函数就执行没有就不执行 这样不会报错
			},
			goGoodsList() {
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail'
				})
			}
			
		},
		onLoad(){
			this.getGoodsList(); //页面加载就获取商品数据列表
		},
		// 实现下拉刷新
		onReachBottom(){
			if(this.goods.length<this.pageindex*10) return this.flag=true// 后面就不会发送请求了
			// console.log(this.goods.length);
			console.log("触底啦");
			this.pageindex++;
			this.getGoodsList();
		},
		onPullDownRefresh (){
			console.log("下拉树新");
			this.pageindex=1;
			this.goods=[];
			this.flag=false;
			setTimeout(()=>{
				this.getGoodsList(()=>{
					uni.stopPullDownRefresh();
				});
				
			},1000)
		}
		
		
	}
</script>

<style lang="scss">
	.goods_list{
		background: #eee;
		.isOver{
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			// background: #fff;
			font-size: 28rpx;
		}
	}
	

</style>
